<template>
  <el-container class="chat-page">
    <el-aside width="260px" class="aside">
      <div class="header">
        <el-input
          class="search-text"
          size="small"
          placeholder="搜索"
          :prefix-icon="Search"
          v-model="searchText"
        />
      </div>
      <div
        class="chat-loading"
        v-if="loading"
        v-loading="true"
        element-loading-text="消息接收中..."
        :element-loading-spinner="Loading"
        element-loading-background="#F9F9F9"
        element-loading-size="24"
      ></div>
      <!-- 左侧聊天列表 -->
      <el-scrollbar class="chat-items" v-else>
        <div v-for="(chat, index) in chatStore.chats" :key="index">
          <ChatItem
            v-show="
              !chat.delete &&
              chat.showName &&
              chat.showName.includes(searchText)
            "
            :chat="chat"
            :index="index"
            @click.native="onActiveItem(index)"
            @delete="onDelItem(index)"
            @top="onTop(index)"
            :active="chat === chatStore.activeChat"
          ></ChatItem>
        </div>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <ChatBox
        v-if="chatStore.activeChat"
        :chat="chatStore.activeChat"
      ></ChatBox>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { Loading, Search } from "@element-plus/icons-vue";
import { useChatStore } from "@/store/modules/chatStore";
const chatStore = useChatStore();

const searchText = ref("");
const loading = computed(() => {
  return chatStore.loadingGroupMsg || chatStore.loadingPrivateMsg;
});
function onActiveItem(index: number) {
  chatStore.setActiveChat(index);
}
function onDelItem(index: number) {
  chatStore.removeChat(index);
}
function onTop(chatIdx: any) {
  chatStore.moveTop(chatIdx);
}
</script>

<style lang="scss" scoped>
.chat-page {
  display: flex;
  .aside {
    display: flex;
    flex-direction: column;
    background: var(--im-background);

    .header {
      height: 50px;
      display: flex;
      align-items: center;
      padding: 0 8px;
    }

    .chat-loading {
      height: 50px;
      background-color: #eee;

      .el-icon-loading {
        font-size: 24px;
        color: var(--im-text-color-light);
      }

      .el-loading-text {
        color: var(--im-text-color-light);
      }
    }

    .chat-items {
      flex: 1;
    }
  }
}
</style>
